<template>
    <div id="can1">
        
    </div>
</template>

<script setup>
    import { CanvasRenderer } from 'echarts/renderers'
    import { init, use, dispose } from 'echarts/core'
    import { GridComponent, TooltipComponent } from 'echarts/components'
    import { ScatterChart } from 'echarts/charts'
    import { onMounted, onUnmounted } from 'vue'
    let data = Array.from({length: 3000}, (_, i) => {
        return {
            value: i + 1,
            itemStyle: {
                color: i % 10 === 0 ? 'black' : 'red'
            }
        }
    })
    let myChart = null
    let can1 = null
    onMounted(()=> {
        use([CanvasRenderer, GridComponent, TooltipComponent, ScatterChart])
        can1 = document.getElementById('can1')
        myChart = init(can1)
        let options = {
            xAxis: {},
            yAxis: {},
            tooltip: {},
            series: [
                {
                    type: 'scatter',
                    data,
                    progressive: 400, // 默认一次渲染 400个
                    progressiveThreshold: 2000,  // 渲染阀值
                }
            ]
        }
        myChart.setOption(options)
    })
    onUnmounted(() => {
        dispose(can1)
        myChart = null
    })
</script>
 
<style lang='less' scoped>
    #can1{
        width: 800px;
        height: 400px;
    }
</style>